<script setup lang="ts">
import {ref, computed, defineProps} from 'vue'
import {ceoCreate,staffCreate} from "../api/coupon.ts";
import {storeInfo} from "../api/store.ts";
const category = ref()
const num = ref()
const fullAmount = ref()
const disAmount = ref()
const options = ["所有商店","特定商店"]
const val = ref("所有商店")
const storeId = ref()
const storeList = ref<any[]>([])
const createDisable1 = computed(() => category.value == null || !num.value || (category.value == 0 && (!fullAmount.value || ! disAmount.value)))
const createDisable2 = computed(() => (val.value === '特定商店' && !storeId.value))
const props = defineProps<{
  role : string,
}>()

storeInfo().then(res =>{
  storeList.value = res.data.result
})
function Create(){
  if (props.role === 'STAFF'){
    staffCreate({
      couponCount : num.value,
      couponType : category.value,
      fullAmount : fullAmount.value,
      discountAmount : disAmount.value
    }).then(res =>{
      if (res.data.code === '000') {
        ElMessage({
          message: "发布成功",
          type: 'success',
          center: true,
        })
        num.value = null
        category.value = null
        fullAmount.value = null
        disAmount.value = null
      }
      else{
        ElMessage({
          message: res.data.msg,
          type: 'error',
          center: true,
        })
      }
    })
  }
  else{
    if(val.value === '所有商店'){
      storeId.value = null
    }
    ceoCreate({
      couponCount : num.value,
      couponType : category.value,
      fullAmount : fullAmount.value,
      discountAmount : disAmount.value,
      storeId : storeId.value
    }).then(res =>{
      if (res.data.code === '000') {
        ElMessage({
          message: "发布成功",
          type: 'success',
          center: true,
        })
        num.value = null
        category.value = null
        fullAmount.value = null
        disAmount.value = null
      }
      else{
        ElMessage({
          message: res.data.msg,
          type: 'error',
          center: true,
        })
      }
    })
  }


}
</script>

<template>
  <el-main class = "coupon-creation">
    <el-form class="coupon-form">
      <el-form-item label="优惠券种类" >
        <el-select v-model = "category" placeholder="请选择优惠券种类" class="input-section">
          <el-option label = "满减券" :value = 0></el-option>
          <el-option label = "蓝鲸券" :value = 1></el-option>
          <el-option label = "无门槛券" :value = 2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label = "发布优惠券数量" class="input-section">
        <el-input-number v-model = "num" :min = "0"></el-input-number>
      </el-form-item>
      <el-form-item v-if = "category == 0" label="满减条件" class="input-section">
        <el-tag>满</el-tag>
        <el-input-number v-model = "fullAmount" :min = "0"></el-input-number>
        <el-tag>减</el-tag>
        <el-input-number v-model = "disAmount" :min = "0"></el-input-number>
      </el-form-item>
      <el-form-item v-if = "category == 2" label = "立减金额" class = "input-section">
        <el-input-number v-model = "disAmount" :min = "0"></el-input-number>
      </el-form-item>

      <el-form-item v-if = "props.role == 'CEO'" label="发布对象" class="input-section">
        <el-segmented v-model="val" :options="options" />
        <el-select id="storeName"
                   v-model="storeId"
                   placeholder="请选择"
                   style="width: 100%;"
                   v-if = "val === '特定商店'"
        >
          <el-option v-for = "store of storeList" :value = "store.id" :label = "store.name"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type = "primary" @click = "Create" :disabled = (createDisable1||createDisable2)>确认发布</el-button>

      </el-form-item>

    </el-form>

  </el-main>

</template>

<style scoped>
.coupon-creation {
  padding: 20px;
}

.coupon-form {
  max-width: 500px;
  margin: 0 auto;
}

.input-section {
  margin-bottom: 20px;
}
</style>